import React, {Component} from 'react';
import axios from 'axios';
import {
  View,
  ScrollView,
  Center,
  Image,
  Flex,
  Text,
  Input,
  SearchIcon,
} from 'native-base';
import {
  Dimensions,
  StyleSheet,
  TouchableOpacity,
  NativeModules,
  TextInput,
} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import * as WeChat from 'react-native-wechat-lib';
const {width} = Dimensions.get('window');
const marginLeft = 100;
class HomePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      guxiyin_num: 0, //古印原印
      guyinYintui_num: 0, //古印印蜕
      liupai_num: 0, //流派印蜕
      zidian_num: 0, //字典收录
    };
  }
  componentDidMount() {
    this.searchNum();
  }
  //获取数目信息
  async searchNum() {
    let data = await axios({
      url: 'https://www.guyinbaike.com/real_total_data',
      data: {
        key: false,
      },
    });
    this.setState({
      guxiyin_num: data.data.guxiyin_num,
      guyinYintui_num: data.data.guyinYintui_num,
      liupai_num: data.data.liupai_num,
      zidian_num: data.data.zidian_num,
    });
  }
  //点击输入框跳转到
  clickIpt() {
    // 'this',this.props.navigation.navigate('SealCutting',{
    //     ...this.props
    // })
    this.props.navigation.navigate('SealCuttings');
  }
  render() {
    return (
      <View>
        <ScrollView>
          {/*古印荟萃*/}
          <Center style={styles.title}>
            <Center
              style={styles.titleFloat}
              _text={{fontSize: 30, fontWeight: '900', lineHeight: 100}}>
              古印
            </Center>
            <Center style={styles.titleFloat}>
              <Image
                source={require('../../assets/logo.png')}
                alt="Alternate Text"
                size="2xl"
                style={{
                  height: '100%',
                  width: '100%',
                }}
              />
            </Center>
            <Center
              style={styles.titleFloat}
              _text={{fontSize: 30, fontWeight: '900', lineHeight: 100}}>
              荟萃
            </Center>
          </Center>
          {/*欢迎*/}
          <Center style={styles.welcome}>
            <Center _text={{fontWeight: 'bold'}}>欢迎来到 印章的世界</Center>
            <Center _text={{fontSize: 16, color: '#737373'}}>
              壬寅 · 暮春
            </Center>
          </Center>
          {/*搜索框*/}
          <Center style={styles.inputVessel}>
            <TextInput
              onFocus={() => {
                this.clickIpt();
              }}
              value={this.state.inputValue}
              onChangeText={this.handleChange}
              onSubmitEditing={this._searchPressingEnter}
              style={styles.inputSearch}
              placeholder="请输入你要检索的内容"
              w="100%"
            />
            <View style={styles.sider}>
              {/*<Center _text={{fontWeight: 'bold', fontSize: 16}}>*/}
              {/*  偏旁选择*/}
              {/*</Center>*/}
            </View>
            <View style={styles.ico}>
              <Center _text={{lineHeight: 50}}>
                <SearchIcon style={{marginTop: 10}} size="6" />
              </Center>
            </View>
          </Center>
          {/*四大部分印章的数量*/}
          <Center style={styles.fourNum}>
            <Center>
              <Center _text={{color: '#b0b0b0'}}>古印原印</Center>
              <Center _text={{fontWeight: 'bold'}}>
                {this.state.guxiyin_num}
              </Center>
            </Center>
            <Center>
              <Center _text={{color: '#b0b0b0'}}>古印印蜕</Center>
              <Center _text={{fontWeight: 'bold'}}>
                {this.state.guyinYintui_num}
              </Center>
            </Center>
            <Center>
              <Center _text={{color: '#b0b0b0'}}>流派印蜕</Center>
              <Center _text={{fontWeight: 'bold'}}>
                {this.state.liupai_num}
              </Center>
            </Center>
            <Center>
              <Center _text={{color: '#b0b0b0'}}>字典收录</Center>
              <Center _text={{fontWeight: 'bold'}}>
                {this.state.zidian_num}
              </Center>
            </Center>
          </Center>
          <Center style={styles.introduces}>
            {/*声明和侵权*/}
            <Center
              style={styles.say}
              _text={{fontWeight: 'bold', color: '#b0b0b0'}}>
              声明<Center style={{height: 5}}></Center>侵权立删
            </Center>
            {/*介绍*/}
            <View style={styles.contents}>
              <Text style={styles.introduces_chinese}>
                ·非常感谢大家一.直以来的支持和喜欢
              </Text>
              <Text style={styles.introduces_chinese}>
                ·积极地帮忙校对释文、无私的提供资料
              </Text>
              <Text style={styles.introduces_chinese}>
                ·对于我们的建设，起到了至关重要的作用
              </Text>
              <Text style={styles.introduces_chinese}>
                ·为感谢各位的支持和推动印章文化的发展
              </Text>
              <Text style={styles.introduces_chinese}>
                ·古印荟萃将永久无广 告，永久免费
              </Text>
            </View>
          </Center>
          {/*微信小程序*/}
          <Center style={styles.wechat}>
            <TouchableOpacity>
              <Center style={styles.jump_wechat}>
                <Center style={{marginLeft: 20}}>
                  <MaterialCommunityIcons
                    name="sync"
                    size={40}
                    color={'#1677d2'}
                  />
                </Center>
                <Center>
                  <Text style={{fontSize: 12}}>更多功能尽在</Text>
                  <Text style={{fontSize: 12}}>微信小程序版本</Text>
                </Center>
              </Center>
            </TouchableOpacity>
            <Center style={styles.wechat_groud}>
              <Center style={{marginLeft: 20}}>
                <MaterialCommunityIcons
                  name="wechat"
                  size={40}
                  color={'#16d46b'}
                />
              </Center>
              <Center>
                <Text style={{fontSize: 12}}>加入社群</Text>
                <Text style={{fontSize: 12}}>反馈错误和建议</Text>
              </Center>
            </Center>
          </Center>
          {/*社群*/}
        </ScrollView>
      </View>
    );
  }
}

export default HomePage;
const styles = StyleSheet.create({
  ico: {
    position: 'absolute',
    right: 10,
    top: 2,
    width: 49,
    height: 49,
    textAlign: 'center',
    lineHeight: 50,
  },
  sider: {
    position: 'absolute',
    right: 60,
    top: 2,
    width: 48,
    height: 49,
  },
  inputSearch: {
    width: '100%',
    borderWidth: 2,
    borderColor: '#4b8ff8',
    borderRadius: 15,
    paddingLeft: 20,
  },
  title: {
    height: 80,
    width: width - marginLeft,
    marginLeft: marginLeft / 2,
    borderBottomWidth: 5,
    borderColor: 'black',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 50,
  },
  titleFloat: {
    width: '33%',
    height: '100%',
  },
  inputVessel: {
    position: 'relative',
    width: width - marginLeft + 40,
    marginLeft: marginLeft / 2 - 20,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    marginBottom: 10,
  },
  welcome: {
    width: width - marginLeft,
    marginLeft: marginLeft / 2,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
  },
  fourNum: {
    width: width - marginLeft + 20,
    marginLeft: marginLeft / 2 - 10,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  introduces: {
    marginTop: 50,
    width: width - marginLeft + 40,
    marginLeft: marginLeft / 2 - 10,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  say: {
    height: '100%',
    width: 20,
    writingMode: 'vertical-rl',
  },
  contents: {
    height: '100%',
    width: width - marginLeft + 40 - 20,
  },
  introduces_chinese: {
    paddingLeft: 10,
    lineHeight: 25,
    color: '#b7b7b7',
  },
  wechat: {
    marginTop: 80,
    width: width - marginLeft + 40,
    height: 80,
    marginLeft: marginLeft / 2 - 30,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  jump_wechat: {
    width: '50%',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  wechat_groud: {
    width: '50%',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});
